<template>
  <div>
    <el-row type="flex" class="selectClassify" align="middle" justify="space-between">
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>选择一级分类</span>
          </div>
          <el-input placeholder="分类搜索" prefix-icon="el-icon-search" v-model="selectFirstClassifyName"
                    @change="searchClassifyOne" clearable>
          </el-input>
          <el-scrollbar>
            <el-radio-group v-model="classifyId.firstClassify" v-for="(item,index) in firstClassifyList" :key="index"
                            @change="changeClassifyOne">
              <el-radio-button :label="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>选择二级分类</span>
          </div>
          <el-input placeholder="分类搜索" prefix-icon="el-icon-search" v-model="selectSecClassifyName"
                    @change="searchClassifyTwo" clearable>
          </el-input>
          <el-scrollbar>
            <el-radio-group v-model="classifyId.secClassify" v-for="(item,index) in secClassifyList" :key="index"
                            @change="changeClassifyTwo">
              <el-radio-button :label="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header">
            <span>选择三级分类</span>
          </div>
          <el-input placeholder="分类搜索" prefix-icon="el-icon-search" v-model="selectThiClassifyName"
                    @change="searchClassifyThree" clearable>
          </el-input>
          <el-scrollbar>
            <el-radio-group v-model="classifyId.thiClassify" v-for="(item,index) in thiClassifyList" :key="index"
                            @change="changeClassifyThree">
              <el-radio-button :label="item.value">{{item.label}}</el-radio-button>
            </el-radio-group>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <p class="mt20 c-gray">您当前选择的商品分类是：{{classifyName.firstClassify}}<i class="el-icon-arrow-right"></i>{{classifyName.secClassify}}<i
      class="el-icon-arrow-right"></i>{{classifyName.thiClassify}}</p>
    <div class="mt20 text-center">
      <el-button type="info" @click="goBackStep1">上一步，选择供应商</el-button>
      <el-button type="primary" @click="nextStep2">下一步，填写商品信息</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ChooseSupplier",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        firstClassifyListBack: [],
        secClassifyListBack: [],
        thiClassifyListBack: [],
        firstClassifyList: [],
        secClassifyList: [],
        thiClassifyList: [],
        classifyId: {
          firstClassify: null,
          secClassify: null,
          thiClassify: null
        },
        classifyName: {
          firstClassify: "",
          secClassify: "",
          thiClassify: ""
        },
        selectFirstClassifyName: "",
        selectSecClassifyName: "",
        selectThiClassifyName: ""
      }
    },
    methods: {
      getClassifyInfo(info) {
        ajax.post(apis.product.getInsertProductdInProductType, info)
          .then(res => {
            if (res.success === true) {
              if (info.type === 1) {
                if (res.data !== [] && res.data !== null) {
                  this.firstClassifyList = this.firstClassifyListBack= res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                } else {
                  this.firstClassifyList = []
                }
              } else if (info.type === 2) {
                if (res.data !== [] && res.data !== null) {
                  this.secClassifyList = this.secClassifyListBack = res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                } else {
                  this.secClassifyList = []
                }
              } else {
                if (res.data !== [] && res.data !== null) {
                  this.thiClassifyList = this.thiClassifyListBack  = res.data.map(item => {
                    return {
                      label: item.classifyName,
                      value: item.id
                    }
                  })
                } else {
                  this.thiClassifyList = []
                }
              }
            }
          })
      },
      goBackStep1() {
        this.secClassifyListBack = [];
        this.thiClassifyListBack = [];
        this.secClassifyList = [];
        this.thiClassifyList = [];
        this.classifyId = {
          firstClassify: null,
            secClassify: null,
            thiClassify: null
        };
        this.classifyName = {
          firstClassify: "",
            secClassify: "",
            thiClassify: ""
        };
        this.$emit('goBackStep1');
      },
      searchClassifyOne() {
        let searchInfo = this.selectFirstClassifyName.trim()
        if (searchInfo != "") {
          this.firstClassifyList = []
          this.firstClassifyListBack.map(item => {
            if (item.label.indexOf(searchInfo) >= 0) {
              this.firstClassifyList.push(item)
            }
          })
        } else {
          this.firstClassifyList = this.firstClassifyListBack
        }
      },
      changeClassifyOne(value) {
        this.classifyId = {
          firstClassify: value,
          secClassify: null,
          thiClassify: null
        }
        this.classifyName = {
          firstClassify: this.getName(value, this.firstClassifyList),
          secClassify: "",
          thiClassify: ""
        }
        this.selectSecClassifyName = this.selectThiClassifyName = ""
        this.secClassifyListBack = this.secClassifyList = this.thiClassifyListBack = this.thiClassifyList = []
        this.getClassifyInfo({type:2,id:value})
      },
      searchClassifyTwo() {
        let searchInfo = this.selectSecClassifyName.trim()
        if (searchInfo != "") {
          this.secClassifyList = []
          this.secClassifyListBack.map(item => {
            if (item.label.indexOf(searchInfo) >= 0) {
              this.secClassifyList.push(item)
            }
          })
        } else {
          this.secClassifyList = this.secClassifyListBack
        }
      },
      changeClassifyTwo(value) {
        this.classifyName.secClassify = this.getName(value, this.secClassifyList)
        this.classifyId.thiClassify = null
        this.classifyName.thiClassify = this.selectThiClassifyName = ""
        this.thiClassifyListBack = this.thiClassifyList = []
        this.getClassifyInfo({type:3,id:value})
      },
      searchClassifyThree() {
        let searchInfo = this.selectThiClassifyName.trim()
        if (searchInfo != "") {
          this.thiClassifyList = []
          this.thiClassifyListBack.map(item => {
            if (item.label.indexOf(searchInfo) >= 0) {
              this.thiClassifyList.push(item)
            }
          })
        } else {
          this.thiClassifyList = this.thiClassifyListBack
        }
      },
      changeClassifyThree(value) {
        this.classifyName.thiClassify = this.getName(value, this.thiClassifyList)
      },
      getName(id, array) {
        if(array.findIndex(item => item.value === id) >= 0){
          return array[array.findIndex(item => item.value === id)].label
        }else{
          return ""
        }
      },
      nextStep2() {
        if (this.classifyId.firstClassify === null) {
          this.$confirm('<h2>操作失败</h2><p style="padding: 10px;" class="c-gray">请选择商品分类一级分类</p>', {
            showCancelButton: false,
            showConfirmButton: false,
            dangerouslyUseHTMLString: true,
            customClass: "jxf-errorTip",
            type: 'error',
            center: true
          }).then(() => {
          }).catch(() => {
          });
        } else if (this.classifyId.secClassify === null) {
          this.$confirm('<h2>操作失败</h2><p style="padding: 10px;" class="c-gray">请选择商品分类二级分类</p>', {
            showCancelButton: false,
            showConfirmButton: false,
            dangerouslyUseHTMLString: true,
            customClass: "jxf-errorTip",
            type: 'error',
            center: true
          }).then(() => {
          }).catch(() => {
          });
        } else if (this.classifyId.thiClassify === null) {
          this.$confirm('<h2>操作失败</h2><p style="padding: 10px;" class="c-gray">请选择商品分类三级分类</p>', {
            showCancelButton: false,
            showConfirmButton: false,
            dangerouslyUseHTMLString: true,
            customClass: "jxf-errorTip",
            type: 'error',
            center: true
          }).then(() => {
          }).catch(() => {
          });
        } else {
          this.$emit("nextStep2", {id:this.classifyId,name:this.classifyName})
        }
      },
    },
    watch: {
      dataInfo: {
        handler: function(newVal, oldVal) {
          this.getClassifyInfo({type: 1, supplyId: this.dataInfo.supplyId})
        },
        deep: true
      }
    },
    mounted() {
      if(this.dataInfo && this.dataInfo.supplyId) {
        this.getClassifyInfo({type: 1, supplyId: this.dataInfo.supplyId})
      }

    }
  }
</script>

<style lang="scss">
  .selectClassify {
    margin: 20px auto 0;
    max-width: 1100px;
    .el-icon-d-arrow-right {
      font-size: 30px;
    }

    .el-scrollbar {
      height: 280px;
      margin-top: 10px;
    }

    .el-radio-group {
      width: 100%;
      .el-radio-button {
        width: 100%;
        .el-radio-button__inner {
          padding-left: 0;
          padding-right: 0;
          border-width: 0 0 1px 0;
          width: 100%;
          border-radius: 0;
        }
      }

    }
  }
</style>
